{% extends "template.html" %}

{% block page_content %}
<div style="height:100%;width:100%;float:left;">
    <div align="center">
        Server: <select id="host" style="width: 180px; height: 26px; margin-right: 20px;">
            {% for foo in ip %}
                <option value="{{ foo }}">{{ foo }}</option>
            {% endfor %}
    </select>
        Port: <input type="text" name="port" id="port" placeholder="Please input the port" style="margin-right: 20px;">
        <button type="button" id="runMonitor" style="margin-right: 20px;">
            StartMonitor
        </button>
        <button type="button" id="stopMonitor" style="margin-right: 20px;">
            StopMonitor
        </button>
        <button type="button" id="MonitorList">
            MonitorList
        </button>
    </div>
    <br><br><br>
    <h3 align="center">Monitoring List</h3>
    <table width="60%" border="1" cellspacing="0" cellpadding="6" align="center" id="monitor">
        <tr style="align: center; margin: auto; background-color: #99CCFF">
            <th width=20% style="text-align: center;">Server</th>
            <th width=17% style="text-align: center;">Port</th>
            <th width=18% style="text-align: center;">PID</th>
            <th width=18% style="text-align: center;">Status</th>
            <th width=27% style="text-align: center;">StartTime</th>
        </tr>
        {% for foo in foos['host'] %}
            <tr align='center'>
            <td>{{ foos['host'][loop.index0] }}</td>
            <td>{{ foos['port'][loop.index0] }}</td>
            <td>{{ foos['pid'][loop.index0] }}</td>
            <td>{{ run_status[foos['isRun'][loop.index0]] }}</td>
            <td>{{ foos['startTime'][loop.index0] }}</td>
            </tr>
        {% endfor %}

    </table>
</div>
{% endblock %}

{% block myjs %}
<script type="text/javascript">
    $("#runMonitor").click(function () {
        let port = 0;
        let host = $("#host").find("option:selected").text();
        let input_port = document.getElementById("port").value;
        try{
            port = parseInt(input_port, 10);
            if (isNaN(port) || port < 1) {
                $.Toast('Please input the port!', 'error');
                return;
            }
        }
        catch (err) {
            $.Toast(err, 'error');
            return;
        }
        let startMonitor = {
            host: host,
            type: "port",
            port: port,
            isRun: 1
        };
        $(function runMonitor () {
            $.ajax({
                type: 'post',
                url: 'runMonitor',
                data: JSON.stringify(startMonitor),
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    if (data['code'] === 0) {
                        $.Toast(data['msg'], 'success');
                    }
                    else if (data['code'] === 1) {
                        $.Toast(data['msg'], 'warning');
                    }
                    else {
                        $.Toast(data['msg'], 'error');
                    }
                }
            });
        });
    });

    $("#stopMonitor").click(function () {
        let port = 0;
        let host = $("#host").find("option:selected").text();
        let input_port = document.getElementById("port").value;
        try{
            port = parseInt(input_port, 10);
            if (isNaN(port) || port < 1) {
                $.Toast('Please input the port!', 'error');
                return;
            }
        }
        catch (err) {
            $.Toast(err, 'error');
            return;
        }
        let startMonitor = {
            host: host,
            type: "port",
            port: port,
            isRun: 0
        };
        $(function runMonitor () {
            $.ajax({
                type: 'post',
                url: 'runMonitor',
                data: JSON.stringify(startMonitor),
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    if (data['code'] === 0) {
                        $.Toast(data['msg'], 'success');
                    }
                    else if (data['code'] === 1) {
                        $.Toast(data['msg'], 'warning');
                    }
                    else {
                        $.Toast(data['msg'], 'error');
                    }
                }
            });
        });
    });

    $("#MonitorList").click(function () {
        $(function getMonitor () {
            let host = $("#host").find("option:selected").text();
            $.ajax({
                type: 'get',
                url: 'getMonitor/'+host,
                success: function (data) {
                    if (data['code'] === 0) {
                        $.Toast(data['msg'], 'success');
                    }
                    else {
                        $.Toast(data['msg'], 'error');
                        return;
                    }
                    data = data['data'];
                    let text_row = "<tr style=\"align: center; margin: auto; background-color: #99CCFF\">\n" +
                        "<th width=20% style=\"text-align: center;\">Server</th>\n" +
                        "<th width=17% style=\"text-align: center;\">Port</th>\n" +
                        "<th width=18% style=\"text-align: center;\">PID</th>\n" +
                        "<th width=18% style=\"text-align: center;\">Status</th>\n" +
                        "<th width=27% style=\"text-align: center;\">StartTime</th>\n" +
                        "</tr>";
                    let run_status = ['stopped', 'monitoring', 'queuing'];
                    for (let i=0; i<data['port'].length; i++){
                        text_row += "<tr align='center'>";
                        text_row += "<td>" + data['host'][i] + "</td>";
                        text_row += "<td>" + data['port'][i] + "</td>";
                        text_row += "<td>" + data['pid'][i] + "</td>";
                        text_row += "<td>" + run_status[data['isRun'][i]] + "</td>";
                        text_row += "<td>" + data['startTime'][i] + "</td>";
                        text_row += "</tr>";
                    }
                    document.getElementById('monitor').innerHTML=text_row;
                }
            });
        });
    });
</script>
{% endblock %}